<template>
  <div>
    <div class="hello" id="svg">
      <p>
        <code>Snap(…)</code>
         (width, height)/
         css选择器/
         dom svg元素,
         绘制一个面或者包裹一个已经存在的SVG元素。
      </p>
    </div>

    <div>
      <p>
        <code>svg.paper.ellipse(50, 50, 40, 20)</code>
          画一个椭圆球球
      </p>
      <svg id="ellipse" width="100" height="100"></svg>
    </div>

    <div>
      <p>
        <code>svg.paper.filter()</code>
          滤镜元素
      </p>
      <svg id="filter" width="100" height="100"></svg>
    </div>

    <div>
      <p>
        <code>svg.paper.g()/svg.paper.group()</code>
          元素组,参数为元素,如: <code>svg.paper.g(c, d, e, ...)</code>
        也可以通过<code>let grow = svg.paper.g(); grow.add(c, d, e, ...)</code>
      </p>
      <svg id="grow" width="100" height="100"></svg>
    </div>

    <div>
      <p>
        <code>Paper.gradient(gradient)</code>
        创建一个渐变元素。
        渐变描述符
        
        渐变描述符遵循特定的表达式格式：type(coords)colors.
        其中type可以是线性的(linear)或者是径向的(radial)。
        大写字母L或R表示从SVG表明偏移的绝对坐标。
        小写字母l或r表示应用渐变的这个元素计算的相对坐标（可以理解为百分比位置）。
        线性渐变的向量指定通过x1,y1,x2,y2, 
        径向渐变通过cx,cy,r以及（可选的）远离圆心的焦点fx,fy. 
        colors值的指定通过一系列短横符链接的CSS颜色值。
        每个颜色可以跟随一个使用冒号分隔的自定义偏移值。
      </p>
      <svg id="gradient" width="200" height="200"></svg>
    </div>


    <div>
      <p>
        <code>svg.paper.image()</code>
        绘制图片
      </p>
      <svg id="image" width="100" height="100"></svg>
    </div>


    <div>
      <p>
        <code>svg.paper.line(x1, y1, x2, y2)</code>
        绘制直线
      </p>
      <svg id="line" width="100" height="100"></svg>
    </div>
    
    <div>
      <p>
        <code>svg.paper.path(pathString)</code>
        路径,路径字符串
      </p>
      <svg id="path" width="200" height="200"></svg>
    </div>
    
    <div>
      <p>
        <code>svg.paper.polyline(...)</code>
        绘制折线, <code>.polyline([10, 10, 100, 100])</code> 
        或者<code>.polyline(10, 10, 100, 100)</code>
      </p>
      <svg id="polyline" width="200" height="200"></svg>
    </div>
    
    <div>
      <p>
        <code>svg.paper.rect(x, y, width, height, [rx], [ry])</code>
        绘制矩形, <code>rx</code>水平圆角 
        <code>ry</code>垂直圆角 
      </p>
      <svg id="rect" width="200" height="200"></svg>
    </div>
    
    <div>
      <p>
        <code>svg.paper.text(x, y, text)</code>
        绘制文字 <code>text</code>字符串或数组。要绘制的文本字符或者使用分隔的tspan嵌套进去的数组字符串。
      </p>
      <svg id="text" width="200" height="200"></svg>
    </div>
    
    <div>
      <p>
        <code>svg.paper.toString(x, y, text)</code>
        返回元素的SVG代码，等同于HTML中的outerHTML方法。
        
        返回Paper的SVG代码。

        都是字符串
      </p>
      <svg id="tostring" width="200" height="200"></svg>
      
      <p><label style="color:#787878">此处显示当前svg元素toString的字符串结果:</label>{{str}}</p>
    </div>
  </div>
</template>

<script>
const Snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`)
export default {
  name: 'Start',
  data () {
    return {
      str: ''
    }
  },
  created () {
    console.info(Snap)
    let vm = this
    // Snap(…)
    // width, height
    // css选择器
    // dom svg元素
    // 绘制一个面或者包裹一个已经存在的SVG元素。
    let svg = Snap(100, 100)
    svg.paper.circle(50, 50, 40).attr({ fill: 'red' })

    vm.$nextTick(function () {
      document.getElementById('svg').appendChild(svg.node)
    })
    // Snap.angle(x1, y1, x2, y2, [x3], [y3])
    // 返回2个或3个点之间的角度。
    console.log(Snap.angle(10, 10, 30, 30))

    // 椭圆ellipse
    vm.$nextTick(function () {
      let svgEllipse = Snap('#ellipse')
      svgEllipse.paper.ellipse(50, 50, 40, 20)
    })

    // 滤镜filter
    vm.$nextTick(function () {
      let svgFilter = Snap('#filter')
      // 参数为高斯模糊,stdDeviation属性可定义模糊的程度
      let f = svgFilter.paper.filter('<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>')
      svgFilter.paper.circle(50, 50, 40).attr({
        fill: 'green',
        filter: f
      })
    })

    // 元素组
    vm.$nextTick(function () {
      let svgGrow = Snap('#grow')
      let grow = svgGrow.paper.g()
      let growC1 = svgGrow.paper.circle(10, 10, 10)
      let growC2 = svgGrow.paper.rect(50, 40, 40, 50)
      grow.add(growC1, growC2)
    })

    // 创建一个渐变元素
    vm.$nextTick(function () {
      let svgGradient = Snap('#gradient')
      let g = svgGradient.paper.gradient('l(0, 0, 1, 1)#000-#f00-#fff')
      svgGradient.paper.circle(70, 70, 60).attr({
        fill: g
      })
    })

    // 绘制图片
    vm.$nextTick(function () {
      let svgImage = Snap('#image')
      svgImage.paper.image(require('../assets/logo.png'), 0, 0, 90, 90)
    })

    // 绘制线
    vm.$nextTick(function () {
      let svgLine = Snap('#line')
      svgLine.paper.line(0, 0, 90, 90).attr({
        stroke: '#000',
        strokeWidth: 5
      })
    })

    // path
    vm.$nextTick(function () {
      let svgPath = Snap('#path')
      svgPath.paper.path('M10 10C30 30 50 50 90 190').attr({
        stroke: '#000',
        strokeWidth: 2
      })
    })

    // 绘制折线polyline
    vm.$nextTick(function () {
      let svgPolyline = Snap('#polyline')
      svgPolyline.paper.polyline([10, 10, 50, 50, 10, 80]).attr({
        stroke: '#f00',
        strokeWidth: 6,
        fill: 'none'
      })
    })
    // 绘制矩形rect
    vm.$nextTick(function () {
      let svgRect = Snap('#rect')
      svgRect.paper.rect(10, 10, 50, 50, 10, 10).attr({
        fill: '#f0f'
      })
    })
    // 绘制文本text
    vm.$nextTick(function () {
      let svgText = Snap('#text')
      svgText.paper.text(10, 40, 'svg 有点萌').attr({
        fill: '#f0f',
        fontSize: 30
      })
      svgText.paper.text(50, 80, ['S', 'n', 'a', 'p']).attr({
        fill: '#f00',
        fontSize: 28
      })
    })
    // 返回元素字符串tostring
    vm.$nextTick(function () {
      let svgtoString = Snap('#tostring')
      svgtoString.paper.circle(80, 80, 60).attr({
        fill: '#00f'
      })
      vm.str = svgtoString.paper.toString()
      console.info(vm.str)
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
